<template>
    <div>
        <a-form class="candidate-information" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="考生姓名">
                <a-input
                placeholder="请输入考生姓名"
                    v-decorator="[
                    'fksxm', { initialValue:formState.fksxm, rules: rules.fksxm}
                ]"/>
            </a-form-item>
            <a-form-item label="工作单位">
                <a-input
                placeholder="请输入工作单位"
                    v-decorator="['fgzdw', { initialValue:formState.fgzdw, rules: rules.fgzdw}]" />
            </a-form-item>
            <a-form-item label="手机号">
                <a-input
                    placeholder="请输入手机号"
                    v-decorator="['flxdh', { initialValue:formState.flxdh, rules: rules.flxdh}]"/>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
                <a-button class="blue-btn" type="primary" :loading="confirmLoading" @click="handleSubmit" >开始考试</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import validator from '@/common/validator'
import { submitInfoServe } from './service/index'
export default{
    name:"candidateInformation",
    data(){
        return{
            form: this.$form.createForm(this, { name: 'coordinated' }),
            confirmLoading:false,
            testPaperId:this.$route.query.id,
            formState:{
                fksxm:'',
                fgzdw:'',
                flxdh:'',
            },
            rules:{
                fksxm: [{
                    required: true,
                    message: '请输入考生姓名',
                    trigger: 'blur',
                }],
                fgzdw: [{
                    required: true,
                    message: '请输入工作单位',
                    trigger: 'blur',
                }],
                flxdh: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号',
                    trigger: 'blur',
                }],
            },
        }
    },
    watch:{

    },
    mounted(){
        //console.log('路由传参',this.$route.query.id)
    },
    methods:{
        handleSubmit(){
            this.form.validateFields((err, values) => {
                if(!err){
                    this.confirmLoading = true
                    //console.log('提交用户信息',values)
                    submitInfoServe({...values,fsjid:this.$route.query.id}).then(res=>{
                        if(res.code == 200){
                            this.confirmLoading = false
                            var a = document.createElement('a');
                            a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'examinationPaper?id='+res.result.id
                            a.click();
                        }else{
                            this.confirmLoading = false
                        }
                    })
                }
            });
        }
    }
}
</script>
<style>
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.candidate-information{
    margin: 20px;
}
.candidate-information .ant-form-item-label label{
    font-weight: 600;
}
.candidate-information .ant-form-item{
    display: flex;
    align-items: center;
}
.candidate-information .ant-form-item-label{
    text-align: right;
    padding-right: 10px;
}
</style>